<cfsilent>
	<cfset options = $.run.it('optionService.getOptions',{key="workweek"}) />
	<cfset events = $.run.it('workweekService.getWorkweekEventsByWorkdays',{workdays=options.workdays}) />
</cfsilent>

<cfoutput>
	<cfsavecontent variable="page">
		<script>
			<!--- load event category names into struct --->
			Workweek.categories = {};
			Workweek.categories[0] = "No Category";
			<cfloop list="#options.categories#" index="i" item="item">
				Workweek.categories[#i#] = '#item#';
			</cfloop>
			
			<!--- swap the first day according to options --->
			$(document).ready(function(){
				Workweek.changeFirstDay(#options.first_day#);
			});
		</script>

		<div class="header variable-width">
			<i class="fa fa-home" onclick="Main.nav('home');"></i>
			<div class="header-title">Workweek Designer</div>
			#$.render.img(path="craftivity/widget_icons/clock.png")#</br>
			<i class="fa fa-gears" onclick="Main.toggleOptions('workweek');"></i>
			<button id="add_events" class="red" style="position:absolute;right:2px;bottom:2px;" onclick="Workweek.showAdd(this);">Bulk Add</button>
		</div>
		
		#$.run.it("optionView.renderOption",{key="workweek"})#
		
		<div id="add_form" style="display:none;">
			#$.run.it('workweekView.renderAddForm')#
		</div>
		
		<cfloop from="0" to="6" index="day">
			<cfif options.workdays contains day>
				<div class="widget short weekday" day="#day#">
					<div class="widget-form-title">#dayOfWeekAsString(day+1)#</div>
					
					<!--- evaluate unscheduled events --->
					<cfsavecontent variable="unscheduled">
						<cfset unscheduledCount = 0 />
						<cfif structKeyExists(events,day) and structKeyExists(events[day],"unscheduled")>
							<cfloop collection="#events[day].unscheduled#" item="item" index="id">
									<cfset unscheduledCount++ />
									<div 
										class="timeblock workweek-event unscheduled we-cat#events[day]['unscheduled'][id].category#" 
										id="#id#" 
										duration="#events[day]['unscheduled'][id].duration#"
										name="#events[day]['unscheduled'][id].name#"
										<cfif len(events[day]['unscheduled'][id].name) gt 19>
											title="#events[day]['unscheduled'][id].name#"
										</cfif>
									>
										<!--- shorten the duration text if title is long --->
										<cfset leftCount = 10 />
										<cfif len(events[day]['unscheduled'][id].name) gt 16>
											<cfset leftCount = 4 />
										</cfif>
										<div class="workweek-event-duration"><span class="timeblock-time-text">#left($.run.it('workweekService.humanizeDUration',{duration=events[day]['unscheduled'][id].duration}),leftCount)#</span></div>
										<span class="workweek-event-name we-cat#events[day]['unscheduled'][id].category#">#left(events[day]['unscheduled'][id].name,19)#<cfif len(events[day]['unscheduled'][id].name) gt 19>..</cfif></span>
										<i class="fa fa-times delete-workweek" onclick="Workweek.deleteEvent('#id#');"></i>
										<cfif events[day]['unscheduled'][id].goal_id neq "">
											<i class="fa fa-crosshairs workweek-goal" title="Goal:&##013;#events[day]['unscheduled'][id].goal_Name#"></i>
										</cfif>
									</div>
							</cfloop>
							<div class="unscheduled-title" onclick="Workweek.toggleUnscheduled(#day#);">#unscheduledCount# Unscheduled Event<cfif unscheduledCount gt 1>s</cfif><div class="unscheduled-arrow"></div></div>
						</cfif>
					</cfsavecontent>
										
					<cfif unscheduledCount gt 0>
						#unscheduled#
					</cfif>
					
					<!--- to keep track of how many cells are disabled by event duration --->
					<cfset occupiedCells = 0 />
					
					<cfloop from="#options.start_time#" to="#options.end_time-1#" index="hour">
						<cfloop from="1" to="4" index="quarter">
							<!--- see if this timeblock has an event --->
							<cfset eventHTML = "" />
							<cfset quarterToMinute = (quarter-1) * 15 />
							
							<cfif structKEyExists(events,day) and structKEyExists(events[day],hour) and structKeyExists(events[day][hour],quarterToMinute)>
								<cfset sameTimeCounter = 0 />
								<cfsavecontent variable="eventHTML">
									<cfloop collection="#events[day][hour][quarterToMinute]#" item="thisEvent" index="thisEventID">
										<cfset sameTimeCounter++ />
										<div class="scheduled-event we-cat#thisEvent.category#" workweekEventID="#thisEvent.id#" style="height:#thisEvent.duration-1#px;" duration="#thisEvent.duration#" name="#thisEvent.name#">
											<div class="scheduled-event-duration">#$.run.it('workweekService.humanizeDuration',{duration=thisEvent.duration})#</div>
											<span class="workweek-event-name">
												<div class="workweek-category-picker we-cat#thisEvent.category#b"></div>
												<a class="edit-event-name">#left(thisEvent.name,23 * (thisEvent.duration / 15))#</a>
												<cfif len(thisEvent.name) gt 23*(thisEvent.duration/15)>..</cfif>
											</span>
											<div class="drag-resize"><div class="drag-resize-up"></div><div class="drag-resize-down"></div></div>
											<i class="fa fa-times delete-workweek" onclick="Workweek.deleteEvent('#thisEvent.id#');"></i>
											<cfif thisEvent.goal_id neq "">
												<i class="fa fa-crosshairs workweek-goal" title="Goal:&##013;#thisEvent.goal_name#"></i>
											</cfif>
										</div>
										<!--- set occupiedCells to the duration of this event (compare to this set of events) --->
										<cfset occupiedCount = thisEvent.duration / 15 />
										<Cfif occupiedCount gt occupiedCells>
											<cfset occupiedCells = occupiedCount />
										</Cfif>
									</cfloop>
								</cfsavecontent>
							</cfif>
							
							<div class="timeblock <cfif occupiedCells gt 0>workweek-event</cfif>" hour="#hour#" quarter="#quarter#">
								<i class="fa fa-plus addSingleEvent" onclick="Workweek.showCreateEvent(this);"></i>
								<!--- decrement occupiedCount --->
								<cfif occupiedCells gt 0>
									<cfset occupiedCells-- />
								</cfif>
								#eventHTML#
								<!--- render the time ticks --->
								<cfif quarter eq 1>
									<div class="timeblock-time">
										<cfset humanizeHour = hour />
										<cfif humanizeHour gt 11>
											<cfset humanizeHour = humanizeHour - 12 />
										</cfif>
										<cfif humanizeHour eq 0>
											<cfset humanizeHour = 12 />
										</cfif>
										<cfset ampm = "am" />
										<cfif hour gt 11><cfset ampm = "pm"></cfif>
										<span class="timeblock-time-text">#humanizeHour#<span class="ampmText" style="font-size:10px;">#ampm#</span></span>
									</div>
								<cfelseif quarter eq 3>
									<div class="timeblock-time half"><span class="timeblock-time-text">:30</span></div>
								</cfif>
							</div>
						</cfloop>
					</cfloop>
					<div class="timeblock-end">
						<div class="timeblock-time">
							<cfset finalHour = humanizeHour + 1 />
							<cfif finalHour eq 13>
								<cfset finalHour = 1 />
							</cfif>
							<cfif finalHour eq 12>
								<cfif ampm eq "am">
									<cfset ampm = "pm" />
								<cfelse>
									<cfset ampm = "am" />
								</cfif>
							</cfif>
							<span class="timeblock-time-text">#finalHour#<span style="font-size:10px;">#ampm#</span></span>
						</div>
					</div>
				</div>
			<cfelse>
				<!--- so that day swapper can change the first day --->
				<div day="#day#" class="hidden"></div>
			</cfif>
		</cfloop>
	</cfsavecontent>
	
	#application.v.craftivityView.renderPage(page)#
	
</cfoutput>